<template>
	<view class="my-container">
		<!-- 用户信息卡片 -->
		<view class="user-card" @click="goToProfile">
			<image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
			<view class="user-info">
				<view class="user-name-row">
					<text class="user-name">{{ userInfo.nickname }}</text>
					<text class="member-icon">💎</text>
				</view>
				<text class="user-account">账号: {{ userInfo.phone }}</text>
			</view>
			<text class="arrow-icon">></text>
		</view>
		
		<!-- 统计数据 -->
		<view class="stats-section">
			<view class="stat-item">
				<text class="stat-number">{{ userStats.myDevices }}</text>
				<text class="stat-label">我的设备</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ userStats.sharedDevices }}</text>
				<text class="stat-label">共享设备</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ userStats.familyManagement }}</text>
				<text class="stat-label">家庭管理</text>
			</view>
		</view>
		
		<!-- 设置选项列表 -->
		<view class="settings-section">
			<view class="setting-item" @click="goToAccountSecurity">
				<text class="setting-icon">🛡️</text>
				<text class="setting-text">账号安全</text>
				<text class="arrow-icon">></text>
			</view>
			<view class="setting-item" @click="goToNotifications">
				<text class="setting-icon">🔔</text>
				<text class="setting-text">消息通知</text>
				<view class="notification-badge" v-if="notificationCount > 0">
					<text class="badge-text">{{ notificationCount }}</text>
				</view>
				<text class="arrow-icon">></text>
			</view>
			<view class="setting-item" @click="goToHelp">
				<text class="setting-icon">💬</text>
				<text class="setting-text">帮助与反馈</text>
				<text class="arrow-icon">></text>
			</view>
			<view class="setting-item" @click="goToGeneralSettings">
				<text class="setting-icon">⚙️</text>
				<text class="setting-text">通用设置</text>
				<text class="arrow-icon">></text>
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<view class="logout-section">
			<view class="logout-item" @click="handleLogoutClick">
				<text class="logout-icon">{{ isLoggedIn ? '🚪' : '🔑' }}</text>
				<text class="logout-text">{{ isLoggedIn ? '退出登录' : '立即登录' }}</text>
			</view>
		</view>
		
		<!-- 退出登录确认弹窗 -->
		<view class="modal-overlay" v-if="showLogoutModalVisible" @click="hideLogoutModal">
			<view class="modal-content" @click.stop>
				<view class="modal-icon">
					<text class="logout-icon-large">🚪</text>
				</view>
				<text class="modal-title">确认退出登录?</text>
				<text class="modal-desc">退出后将无法控制已连接的智能设备</text>
				<view class="modal-buttons">
					<button class="modal-btn cancel-btn" @click="hideLogoutModal">取消</button>
					<button class="modal-btn confirm-btn" @click="confirmLogout">确认退出</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用户信息
				userInfo: {
					nickname: '游客',
					avatar: '/static/logo.png',
					phone: ''
				},
				// 是否已登录
				isLoggedIn: false,
				// 用户统计数据
				userStats: {
					myDevices: 0,
					sharedDevices: 0,
					familyManagement: 0
				},
				// 通知数量
				notificationCount: 0,
				// 控制退出登录弹窗显示
				showLogoutModalVisible: false
			}
		},
		
		onLoad() {
			// 页面加载时获取用户信息
			this.loadUserInfo()
		},
		
		onShow() {
			// 页面显示时刷新数据
			this.loadUserInfo()
		},
		
		methods: {
			/**
			 * 加载用户信息
			 * 从本地存储或API获取用户信息
			 */
			loadUserInfo() {
				const token = uni.getStorageSync('tenant_token')
				this.isLoggedIn = !!token
				
				if (this.isLoggedIn) {
					// 已登录，加载用户信息
					const userInfo = uni.getStorageSync('user_info')
					if (userInfo) {
						this.userInfo = { ...this.userInfo, ...userInfo }
						// 加载用户统计数据
						this.userStats = {
							myDevices: 12,
							sharedDevices: 5,
							familyManagement: 3
						}
						this.notificationCount = 3
					}
				} else {
					// 未登录，显示游客状态
					this.userInfo = {
						nickname: '游客',
						avatar: '/static/logo.png',
						phone: ''
					}
					this.userStats = {
						myDevices: 0,
						sharedDevices: 0,
						familyManagement: 0
					}
					this.notificationCount = 0
				}
			},
			
			/**
			 * 跳转到个人信息页面
			 */
			goToProfile() {
				if (!this.isLoggedIn) {
					uni.showModal({
						title: '需要登录',
						content: '查看个人信息需要先登录，是否前往登录？',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})
					return
				}
				
				uni.navigateTo({
					url: '/pages/profile/profile'
				})
			},
			
			/**
			 * 跳转到账号安全页面
			 */
			goToAccountSecurity() {
				uni.showToast({
					title: '账号安全功能开发中',
					icon: 'none'
				})
			},
			
			/**
			 * 跳转到消息通知页面
			 */
			goToNotifications() {
				uni.showToast({
					title: '消息通知功能开发中',
					icon: 'none'
				})
			},
			
			/**
			 * 跳转到帮助与反馈页面
			 */
			goToHelp() {
				uni.showToast({
					title: '帮助与反馈功能开发中',
					icon: 'none'
				})
			},
			
			/**
			 * 跳转到通用设置页面
			 */
			goToGeneralSettings() {
				uni.showToast({
					title: '通用设置功能开发中',
					icon: 'none'
				})
			},
			
			/**
			 * 处理登录/退出登录点击
			 */
			handleLogoutClick() {
				if (this.isLoggedIn) {
					// 已登录，显示退出登录弹窗
					this.showLogoutModal()
				} else {
					// 未登录，跳转到登录页
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			
			/**
			 * 显示退出登录弹窗
			 */
			showLogoutModal() {
				this.showLogoutModalVisible = true
			},
			
			/**
			 * 隐藏退出登录弹窗
			 */
			hideLogoutModal() {
				this.showLogoutModalVisible = false
			},
			
			/**
			 * 确认退出登录
			 */
			confirmLogout() {
				// 清除本地存储的用户信息
				uni.removeStorageSync('tenant_token')
				uni.removeStorageSync('user_info')
				uni.removeStorageSync('tenant_unionid')
				
				// 隐藏弹窗
				this.hideLogoutModal()
				
				// 显示退出成功提示
				uni.showToast({
					title: '已退出登录',
					icon: 'success'
				})
				
				// 跳转到首页
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 1500)
			}
		}
	}
</script>

<style scoped>
	.my-container {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 30rpx;
	}
	
	/* 用户信息卡片 */
	.user-card {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.user-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}
	
	.user-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.user-name-row {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}
	
	.user-name {
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
		margin-right: 12rpx;
	}
	
	.member-icon {
		font-size: 24rpx;
		color: #3CC45F;
	}
	
	.user-account {
		font-size: 24rpx;
		color: #666666;
	}
	
	.arrow-icon {
		font-size: 24rpx;
		color: #CCCCCC;
	}
	
	/* 统计数据区域 */
	.stats-section {
		display: flex;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.stat-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.stat-number {
		font-size: 48rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 8rpx;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #666666;
	}
	
	/* 设置选项区域 */
	.settings-section {
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.setting-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		position: relative;
	}
	
	.setting-item:last-child {
		border-bottom: none;
	}
	
	.setting-icon {
		font-size: 40rpx;
		margin-right: 24rpx;
	}
	
	.setting-text {
		flex: 1;
		font-size: 32rpx;
		color: #333333;
	}
	
	.notification-badge {
		position: absolute;
		right: 60rpx;
		width: 32rpx;
		height: 32rpx;
		background-color: #FF4444;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.badge-text {
		font-size: 20rpx;
		color: #ffffff;
		font-weight: bold;
	}
	
	/* 退出登录区域 */
	.logout-section {
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.logout-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
	}
	
	.logout-icon {
		font-size: 40rpx;
		margin-right: 24rpx;
	}
	
	.logout-text {
		font-size: 32rpx;
		color: #FF4444;
	}
	
	/* 退出登录弹窗 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}
	
	.modal-content {
		width: 600rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 60rpx 40rpx 40rpx;
		text-align: center;
	}
	
	.modal-icon {
		width: 100rpx;
		height: 100rpx;
		background-color: #FFEBEE;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 30rpx;
	}
	
	.logout-icon-large {
		font-size: 50rpx;
		color: #F44336;
	}
	
	.modal-title {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.modal-desc {
		display: block;
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 60rpx;
		line-height: 1.5;
	}
	
	.modal-buttons {
		display: flex;
		gap: 20rpx;
	}
	
	.modal-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		border: none;
		font-size: 32rpx;
	}
	
	.cancel-btn {
		background-color: #F5F5F5;
		color: #666666;
	}
	
	.confirm-btn {
		background-color: #F44336;
		color: #ffffff;
	}
</style>
